
<template>
    <div id="time-flow">
        <template v-for="(item,index) in valueData">
            <div :key="index" v-if="item" class="order-flow">
                <span class="time">{{item.created_at.substring(5,16)}}</span>
                <span class="icon"></span>
                <div class="con">
                    {{item.uname ? item.uname+'：':''}}
                    <p class="des">
                        <span v-if="item.way && $root.$data.ways[item.way] && $root.$data.ways[item.way].show" class="way">{{$root.$data.ways[item.way].txt}}</span>
                        {{fKind[item.fkind] && fKind[item.fkind].show ? fKind[item.fkind].txt : ''}}
                        {{$root.$data.ways[item.way] && $root.$data.ways[item.way].show && fKind[item.fkind] && fKind[item.fkind].show && item.remarks ? "，" : ''}}
                        {{fKind[item.fkind] && fKind[item.fkind].show && item.remarks ? fKind[item.fkind].msg : ''}}{{item.remarks ? item.remarks : ''}}
                    </p>
                    <div class="img-box" v-if="item.imgs && item.imgs.length > 0">
                        <img
                            @click="handleShowBigImg(imgitem)"
                            class="img-item"
                            v-for="imgitem in item.imgs"
                            :key="imgitem"
                            :src="imgitem"
                        />
                    </div>
                </div>
            </div>
        </template>

        <div class="img-pop" v-if="big_show" @click="big_show = false">
            <img class="image" :src="big">
            <div class="vm"></div>
        </div>
    </div>
</template>

<script>
	export default{
        name:'SsFullow',
        props:{
            valueData:{
                type:Array,
                default:function(){
                    return [

                    ]
                }
            }
        },
		data(){
			return {
                fKind: {
                    '1':{txt:'创建订单',show:false},
                    '2':{txt:'指派',show:false},
                    '3':{txt:'接单',show:false},
                    '4':{txt:'拒单',show:false},
                    '5':{txt:'完成',show:true},
                    '6':{txt:'销单',show:true,msg:'备注：'},
                    '7':{txt:'短信催单',show:false},
                    '8':{txt:'催单',show:true},
                    '9':{txt:'修改',show:false},
                    '10':{txt:'删除指派',show:false},
                    '11':{txt:'后台接单',show:false},
                    '12':{txt:'后台完成',show:false},
                    '13':{txt:'标记为非重复单',show:false},
                    '14':{txt:'标记为重复单',show:false},
                    '15':{txt:'修改订单',show:false},
                    '16':{txt:'修改订单',show:false},
                    '17':{txt:'修改订单',show:false},
                    '18':{txt:'修改订单',show:false}
                },
                big_show: false,
                big: '',
			}
		},
        methods:{
            handleShowBigImg(url){
                this.big_show = true
                this.big = url
            }
        }
	}
</script>
<style scoped lang="less">
    #time-flow {
        display: block;
        padding-left: 0;
        div {
            padding-left: 0;;
        }
        .order-flow {
            position: relative;
            line-height: 24px;
            width: 100%;
            &:hover {
                 background-color: #f8fdfd;
                 color: #83bc35;
             }
            .time {
                position: absolute;
                left: 0;
                top: 6px;
                width: 58px;
                text-indent: 0;
                font-size: 16px;
            }
            .icon {
                position: absolute;
                left: 61px;
                top: 11px;
                width: 16px;
                height: 16px;
                border-radius: 50%;
                border: 3px solid #f5f5f5;
                background-color: #c3c0c0;
            }
            .con {
                margin-left: 68px;
                padding: 8px 3px 8px 16px;
                border-left: 2px solid #c3c0c0;
                min-height: 56px;
                text-align: left;
                text-indent: 0;
            }
        }
        .way {
            background-color: #7b7b7b;
            font-size: 14px;
            padding: 2px 6px;
            color: #fff;
            border-radius: 4px;
            line-height: 1;
        }
        .img-box {
            margin-left: -5px;
        }
        .img-item {
            max-width: 36px;
            max-height: 36px;
            margin: 5px ;
            cursor: pointer;
        }
    }
    .img-pop {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background-color: rgba(0,0,0,.1);
        font-size: 0;
        z-index: 2;
        text-align: center;
        .image {
            display: inline-block;
            vertical-align: middle;
            max-width: 90%;
            max-height: 90%;
        }
        .vm {
            display: inline-block;
            vertical-align: middle;
            width: 0;
            height: 100%;
        }
    }
</style>